<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-row>
          <el-col>
            <el-input class="input" v-model="input1" size="small" placeholder="请输入学号或姓名" />
          </el-col>
          <el-col>
            <el-button class="button" type="text" @click="search">搜索</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-upload ref="upload" action="" :http-request="uploadPersonFile" :auto-upload="false">
              <template #trigger>
                <el-button type="primary">选择模板文件</el-button>
              </template>
              <el-button type="success" @click="submitUpload">
                批量上传学生信息
              </el-button>
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <a :href='"http://localhost:8088/downloadPersonModel"'>下载模板</a>
          </el-col>
        </el-row>
      </div>
    </template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="id" label="学号" width="150"  :sortable="{custom}"/>
      <el-table-column prop="name" label="姓名" width="120" :sortable="{custom}">
        <template #default="scope"><router-link :to='"/managestudents/" + scope.row.id'>{{ scope.row.name }}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="genda" label="性别" width="120" :sortable="{custom}"/>
      <el-table-column prop="level" label="户籍" width="120" :sortable="{custom}"/>
      <el-table-column prop="depart" label="班级" width="120" :sortable="{custom}"/>
      <el-table-column prop="ability" label="联系方式" width="120" :sortable="{custom}"/>
      <el-table-column prop="grade" label="成绩" width="120" :sortable="{custom}"/>
      <el-table-column prop="dengji" label="等级" width="120" :sortable="{custom}"/>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click="update(scope.row)">编辑</el-button>
          <el-dialog v-model="dialogFormVisible" title="学生信息更新">
            <el-form :model="form">
              <el-form-item label="学号" :label-width="formLabelWidth">
                <el-input v-model="form.id" disabled></el-input>
              </el-form-item>
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="genda">
                <el-select v-model="form.genda" placeholder="请选择性别">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="户籍" :label-width="formLabelWidth">
                <el-input v-model="form.level" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="班级" :label-width="formLabelWidth">
                <el-input v-model="form.depart" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="联系方式" :label-width="formLabelWidth">
                <el-input v-model="form.ability" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="成绩" :label-width="formLabelWidth">
                <el-input v-model="form.grade" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="等级" :label-width="formLabelWidth">
                <el-input v-model="form.dengji" autocomplete="off"></el-input>
              </el-form-item>
              
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updateOK">确认</el-button>
              </span>
            </template>
          </el-dialog>
          <el-button type="text" size="small" @click="deletebyID(scope.row)">删除</el-button>
          <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
            <span>确定删除吗？</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="deleteOK">确定</el-button>
              </span>
            </template>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      input1: '',
      form: {
        id: '',
        name: '',
        genda: '',
        level: '',
        depart: '',
        ability: '',
        grade: '',
        dengji:''
      },
      dialogFormVisible: false,
      dialogVisible: false,
      deleteid: '',
      message: ''
    }
  },
  mounted() {
    this.searchall()
  },
  methods: {
    uploadPersonFile(param) {
      const that = this
      let formData = new FormData()
      formData.append('file', param.file)
      this.axios.post('/addpersons', formData, {
        'Content-Type': 'multipart/form-data'
      }).then(function (response) {
        // console.log(response)
        if (response.data == "sucess") {
          alert("添加成功")
        } else {
          alert(response.data)
        }
        that.searchall()
      }).catch(error => {
        alert(error)
      }

      )
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    deleteOK() {
      const that = this
      this.axios.get("/deletestudent", {
        params: { key1: this.deleteid }
      }).then(function (response) {
        //  console.log(response)
        that.searchall()
        that.dialogVisible = false
      })
    },
    deletebyID(row) {
      this.dialogVisible = true
      this.deleteid = row.id
    },
    searchall() {
      const that = this

      this.axios.get("/getAllStudents")
        .then(function (response) {
          that.tableData = response.data
        })
    },
    search() {
      const that = this
      console.log(that)
      this.axios.get("/getStudents", {
        params: { key1: this.input1 }
      })
        .then(function (response) {
          that.tableData = response.data
        })
    },
    update(row) {
      this.dialogFormVisible = true
      this.form = row
    },
    updateOK() {
      const that = this
      this.axios.get("/updateStudent",
        {
          params: {
            key1: this.form.id,
            key2: this.form.name,
            key3: this.form.genda,
            key4: this.form.level,
            key5: this.form.depart,
            key6: this.form.ability,
            key7: this.form.grade,
            key8: this.form.dengji
          }
        })
        .then(function (response) {
          //console.log(response)
          that.searchall()
          that.dialogFormVisible = false
        })
    }
  }

}
</script>

<style>
.input {
  width: 150px;
}
</style>